<template>
  <div class="set-options">
    <div class="options-header">
      <span v-for="item in typeList" :key="item.type">
        <el-button type="primary" @click="optionHeadle(item)">{{item.name}}</el-button>
      </span>
    </div>
    <div class="options-body">
      <div class="select-nav">
        <div class="option-item" v-for="item in typeList"
        :key="item.type" @click="handleType(item)"
        :class="leftActive.type ===  item.type ? 'option-item-active' : ''">{{item.name}}</div>
      </div>
      <div class="select-body">
        <div v-for="item in typeList" :key="item.type">
          <el-card class="box-card" v-if="item.list.length > 0">
            <el-table :data="item.list" style="width: 100%">
              <el-table-column label="序号" width="200" prop="id">
              </el-table-column>
              <el-table-column label="类型" width="200" prop="label">
              </el-table-column>
              <el-table-column label="名称" width="200" prop="value">
              </el-table-column>
              <el-table-column label="操作" align="right">
                <template slot-scope="scope">
                  <el-button size="mini" type="danger" @click="handleDelete(scope.row)">
                    删除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-card>
        </div>
      </div>
    </div>
    <el-dialog class="form-el-dialog"
      :title="activeType?activeType.name:''"
      :visible.sync="dialogVisible" width="60%">
      <option-form :dialog-visible.sync="dialogVisible"
        :user-item="activeItem" :active-type="activeType"></option-form>
    </el-dialog>
  </div>
</template>

<script>
import OptionsApi from '@/api/options';
import OptionsData from '@/utils/optionsData';
import OptionForm from './components/OptionForm.vue';

export default {
  name: 'setOptions',
  components: {
    OptionForm,
  },
  data() {
    return {
      activeType: {},
      activeItem: null,
      leftActive: {},
      dialogVisible: false,
      typeList: OptionsData,
    };
  },
  mounted() {
    const obj = this.typeList[0];
    this.leftActive = obj;
    // 获取列表
    this.getList();
  },
  methods: {
    // 获取列表
    getList() {
      OptionsApi.getList()
        .then((data) => {
          if (data.data.length > 0) {
            this.typeList.forEach((item, index) => {
              const arr = [];
              data.data.forEach((req) => {
                if (parseInt(req.type, 10) === item.type && this.leftActive.type === item.type) {
                  arr.push(req);
                }
              });
              this.typeList[index].list = arr;
            });
          } else {
            this.userList = [];
          }
        })
        .catch(() => {
          this.userList = [];
        });
    },
    optionHeadle(item) {
      this.activeType = item;
      this.dialogVisible = true;
    },
    // 删除
    handleDelete(data) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          OptionsApi.delUser(data.id)
            .then((res) => {
              if (res.data) {
                this.$message({
                  type: 'success',
                  message: '删除成功!',
                });
                this.getList();
              } else {
                this.$message({
                  type: 'info',
                  message: '删除失败!',
                });
              }
            })
            .catch(() => {
              this.$message({
                type: 'info',
                message: '删除失败!',
              });
            });
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          });
        });
    },
    handleType(item) {
      this.leftActive = item;
      // 获取列表
      this.getList();
    },
  },
  watch: {
    dialogVisible() {
      if (!this.dialogVisible) {
        this.activeType = null;
        this.activeItem = null;
        this.getList();
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.set-options {
  width: 100%;
  padding: 15px;
  position: relative;
  .options-header {
    padding-bottom: 15px;
    border-bottom: 1px solid #ccc;
    span {
      margin-right: 10px;
    }
  }
  .options-body {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-top: 10px;
    .select-nav {
      width: 200px;
      height: auto;
      margin-right: 10px;
      padding: 0 10px;
      border-radius: 6px;
      overflow: hidden;
      .option-item {
        height: 50px;
        line-height: 50px;
        padding: 0 10px;
        margin: 0 -10px;

        color: #333;
        cursor: pointer;
        background-color: #ffffff;
        border-bottom: 1px solid #f2f2f2;
      }
      .option-item-active {
        color: #ffffff;
        background-color: rgb(64, 158, 255);
      }
      .option-item:last-child{
        border-bottom: transparent;
      }
    }
    .select-body {
      flex: 1;
    }
  }
}
</style>
